<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/example.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/element-ui.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/weui.min.css?v=1.0" />
	<link rel="stylesheet" type="text/css" href="css/public.css?v=2.0" />
	<link rel="stylesheet" type="text/css" href="css/login.css?v=4.0" />
	<title>登录</title>
</head>

<body>
	<div id="main" style="background: #EEF5FC;">
		<!-- 头部背景 -->
		<div v-cloak class="ub-loginBaneer">
			<div class="ub-loginTitleB">汤山社会治理数据采集系统</div>
			<img src="images/loginBanner.png">
		</div>
		<div class="ub-loginZ">
			<div class="ub-login" style="padding-top: 40px;">
				<div v-cloak class="ub-loginTitle">{{type == 1?'密码登录':'短信验证登录'}}</div>
				<!-- 密码登录 -->
				<div v-cloak class="ub-loginContent" v-show="type == 1">
					<div class="ub-loginInput">
						<div class="ub-account">
							<img src="images/account.png">
							<input type="text" v-model="phone" placeholder="请输入账号">
						</div>
						<div class="ub-password">
							<img src="images/password.png">
							<input type="password" v-model="password" placeholder="请输入密码">
						</div>
						<a href="passForget.html">忘记密码</a>
					</div>
					<div class="ub-loginSwitch1">
						<el-button @click="phoneLogin()" type="primary" class="weui-btn weui-btn_primary"
							:loading="loading">登录</el-button>
						<div @click="loginSwitch(2)" class="ub-loginSwitch">
							<img src="images/phone.png">
							<p>短信验证</p>
						</div>
					</div>
				</div>
				<!-- 账号登录 -->
				<div v-cloak class="ub-loginContent" v-show="type == 2">
					<div class="ub-loginInput">
						<div class="ub-password">
							<img src="images/loginPhone.png">
							<input type="text" v-model="phone" placeholder="请输入手机号">
						</div>
						<div class="ub-loginPassword">
							<div class="ub-password">
								<img src="images/loginCode.png">
								<input v-model="sms_code" type="text" placeholder="请输入验证码">
							</div>
							<a @click="isDese == false?obtainBtn():''" role="button"
								class="weui-btn weui-btn_primary">{{obtain}}</a>
						</div>
					</div>
					<div class="ub-loginSwitch1">
						<el-button @click="phoneLogin()" type="primary" class="weui-btn weui-btn_primary"
							:loading="loading">登录</el-button>
						<!-- <a @click="phoneLogin()" role="button" class="weui-btn weui-btn_primary weui-btn_loading">登录</a> -->
						<div @click="loginSwitch(1)" class="ub-loginSwitch">
							<img src="images/loginPass.png">
							<p>密码登录</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/jwt-decode.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/cHttp.js?v=1.0.2" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/public.js?v=17.0.0"></script>
	<script type="text/javascript">
		var vue = new Vue({
			el: "#main",
			data() {
				return {
					type: 1,
					loginTime: 0,
					obtain: '获取验证码',
					parameter: {},
					// getTime: localStorage.getItem("time"),
					getTime: '',
					openid: '',
					password: '',
					sms_code: '',
					phone: '',
					loading: false,
					isDese: false
				}
			},
			mounted() {
				getToken && (window.location.href = "index.html")
				this.parameter = this.getRequest()
				this.parameter.code && this.openid == '' && this.obtainCode()
			},
			methods: {
				// 获取手机验证码
				obtainBtn() {
					if (this.phone == "") {
						if (document.getElementsByClassName('el-message').length === 0) {
							this.$message({
								message: '手机号不能为空',
								type: 'error',
								duration: 3000
							});
						}
					} else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
						if (document.getElementsByClassName('el-message').length === 0) {
							this.$message({
								message: '手机号码有误，请重填',
								type: 'error',
								duration: 3000
							});
						}
						// this.loading = false
					} else {
						ajax({
							url: formal + "/auth/get-sms-code",
							type: "POST",
							data: {
								phone: this.phone
							},
							success: (res) => {
								if (res.status == 1) {
									this.loginTime = 60
									this.timer()
									this.isDese = true
									if (document.getElementsByClassName('el-message').length === 0) {
										this.$message({
											message: res.message,
											type: 'success',
											duration: 3000
										});
									}
								} else {
									this.$message({
										message: res.message,
										type: 'error',
										duration: 3000
									});
								}
							}
						})
					}
				},
				// 获取头像，昵称等个人信息
				userInfo() {
					ajax({
						url: formal + '/person/info',
						type: 'GET',
						data: {},
						success: (res) => {
							localStorage.setItem("userInfo", JSON.stringify(res.data))
							window.location.href = "index.html"
						}
					})
				},
				// 获取验证码倒计时
				timer() {
					localStorage.setItem("time", this.loginTime)
					if (this.loginTime > 0) {
						this.disabled = true;
						this.loginTime--;
						this.obtain = this.loginTime + "秒";
						setTimeout(this.timer, 1000);
					} else {
						this.loginTime = 0;
						this.obtain = "获取验证码";
						this.disabled = false;
						this.isDese = false
					}
				},
				// 账号or密码登录切换
				loginSwitch(type) {
					this.type = type
				},
				// 登录按钮
				phoneLogin() {
					this.loading = true
					let obj = {}
					if (this.type == 2) {
						obj = {
							phone: this.phone,
							sms_code: this.sms_code,
							openid: this.openid
						}
					} else {
						obj = {
							phone: this.phone,
							password: this.password,
							openid: this.openid
						}
					}
					if (this.phone == "") {
						if (document.getElementsByClassName('el-message').length === 0) {
							this.$message({
								message: '手机号不能为空',
								type: 'error',
								duration: 3000
							});
						}
						this.loading = false
					} else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
						if (document.getElementsByClassName('el-message').length === 0) {
							this.$message({
								message: '手机号码有误，请重填',
								type: 'error',
								duration: 3000
							});
						}
						this.loading = false
					} else {
						ajax({
							url: formal + "/auth/login",
							type: 'POST',
							data: obj,
							success: (res) => {
								if (res.status == 1) {
									if (document.getElementsByClassName('el-message').length === 0) {
										this.$message({
											message: res.message,
											type: 'success',
											duration: 3000
										});
									}
									localStorage.setItem("token", res.data)
									if (localStorage.getItem("token") != null) {
										this.userInfo()
										this.loading = false
									}
								}
							},
						})
					}
				},
				// 获取openid
				obtainCode() {
					loginHttp({
						url: formal + '/auth/wechat-login',
						type: 'GET',
						data: {
							code: this.parameter.code
						},
						success: (res) => {
							if (res.status == 1) {
								localStorage.setItem("openid", res.data.openid)
								this.openid = res.data.openid
							}
						},
					})
				},
				// 获取连接？后面的参数
				getRequest() {
					let url = window.location.search;
					let theRequest = new Object();
					// 判断是否有问号
					if (url.indexOf("?") != -1) {
						// 把问号去掉
						var str = url.substr(1);
						// 以&符分项组成数组
						strs = str.split("&");
						for (var i = 0; i < strs.length; i++) {
							// 循环数组
							// theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
							// 每一项等号左边为属性，等号右边为属性的值，值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
							theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
						}
					}
					return theRequest;
				}
			}
		})
	</script>
</body>

</html>